import { defineComponent, h } from "vue"
import { getValueByModel, setValueByModel } from "./../util"
import { useEditComponents, useEditComponentOptions  } from "./hooks"


export const RadioComponent = defineComponent (
    (props: CellProps) => {
        const { inputRef, visibleComponent } = useEditComponents(props)
        visibleComponent()

        return () => h(
            'div', 
            null, 
            props.column.options?.map((option) => {
                return h(
                    'div', 
                    { class: 'grid-radio' }, 
                    [
                        h(
                            'input', 
                            {
                                ref: inputRef,
                                type: 'radio',
                                checked: getValueByModel(props.column.dataIndex, props.record)?.includes?.(option.value),
                                onChange: (event: InputEvent) => {
                                    setValueByModel(props.column.dataIndex, props.record, option.value)
                                }
                            }
                        ),
                        option.label
                    ]
                )
            })
        )
    },
    useEditComponentOptions()
)